<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>{% block title %}首页{% endblock %}</title>
		{% block include %}
		{% load static %}
		<!--引入layui的css文件和js文件-->
		<link rel="stylesheet" type="text/css" href="{% static 'layui-v2.6.8/layui/css/layui.css' %}" />
		<script src="{% static 'layui-v2.6.8/layui/layui.js' %}" type="text/javascript" charset="utf-8"></script>
		<!--引入附加的index.css文件-->
		<link rel="stylesheet" type="text/css" href="{% static 'CSS/index.css' %}" />
		{% endblock %}
	</head>
	<body style="background-color:#F5F5F5">
		{% block subject %}
		<header>
			<!--首页导航	-->
			<ul class="layui-nav" style="display:flex;justify-content:center;">
				<li class="layui-nav-item layui-this"><a href="/washer/index" style="font-size:24px;">首页</a></li>
				<li class="layui-nav-item"><a href="/washapp/index" style="font-size:24px;">洗衣</a></li>
				<li class="layui-nav-item"><a href="/community/index" style="font-size:24px;">社区</a></li>
				<li class="layui-nav-item"><a href="/washer/login" style="font-size:24px;">我的</a></li>
			</ul>
		</header>

		<main>
			<!--首页轮播图-->
			<div style="margin-top:100px;">
				<div style="display:flex;justify-content:center;">
					<div class="layui-carousel" id="index">
						<div class="layui-carousel" carousel-item style="box-shadow: 0px 0px 10px #000000;">
							{% load static %}
							<div class=""><img src="{% static 'img/index01.png' %}"></div>
							<div class=""><img src="{% static 'img/index02.png' %}"></div>
							<div class=""><img src="{% static 'img/index03.png' %}"></div>
						</div>
						<button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
						<button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
					</div>
				</div>
			</div>
		</main>

		<footer>

		</footer>
		<!--设置轮播图JS-->
		<script type="text/javascript">
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				// 实例化
				carousel.render({
					elem: '#index', // 指向容器选择器-->id='clothes'
					width: '900px', // 设置容器宽度，可设置为px或百分比
					height: '383px', // 设置容器高度
					autoplay: true, // 设置切换方式
					anim: 'default', // 设置轮播方向，此为上下轮播，默认为左右轮播(default)
					interval: 3000, // 设置切换时间，单位ms
				});
			});
		</script>
		{% endblock %}
	</body>
</html>
